<template>
  <div>
    <!-- 注意！uniapp 的条件编译没有 #else/#elseif/#elif，需要通过 #ifdef/#ifndef 组合实现 -->
    <!-- #ifdef APP-HARMONY -->
    <!-- 视频用 video 标签，其他内容用 rich-text 标签，不要用 rich-text 播放视频，会导致应用卡死 -->
    <view>
      <div v-if="containsVideo">
        <video :src="videoSrc" controls preload="auto"/>
      </div>
      <rich-text v-else :nodes="parsedContent" />
    </view>
    <!-- #endif -->
    <!-- #ifndef APP-HARMONY -->
    <mpHtml :content="parsedContent" />
    <!-- #endif -->
  </div>
</template>

<script lang="ts">
import vue  from '../../../../../../adapter-vue';
import { extractVideoSrc, parseMarkdown } from './marked';
import { customerServicePayloadType } from '../../../../../../interface';
// #ifndef APP-HARMONY
// 直接引用 RichText 源码目录，仓库未包含 dist 产物
import mpHtml from '../../../../../common/RichText/src/uni-app/components/mp-html/mp-html.vue';
// #endif
const { computed, ref } = vue;
interface Props {
  payload: customerServicePayloadType;
}
export default {
  components: {
    // #ifndef APP-HARMONY
    mpHtml
    // #endif
  },
  props: {
    payload: {
      type: Object as () => customerServicePayloadType,
      default: () => ({}),
    },
  },
  setup(props: Props) {
    const parsedContent = computed(() => {
      return parseMarkdown(props.payload.content);
    });

    // #ifdef APP-HARMONY
    const containsVideo = computed(() => {
      return parsedContent.value.includes('<video');
    });

    const videoSrc = computed(() => {
      return extractVideoSrc(parsedContent.value) as string;
    });
    // #endif

    return {
      props,
      parsedContent,
      // #ifdef APP-HARMONY
      containsVideo,
      videoSrc,
      // #endif
    };
  },
};
</script>
<style lang="scss">
</style>
